<template>
  <div class="mui-scroll-wrapper">
    <div class="mui-scroll">
      <div class="zzsh-ewm" v-if="qrcodeFlag">
        <!--<img :src="qrcodeUrl">-->
        <div @click="showImagePreview()">
          <img v-if="qrcodeUrl.length>0" :src="qrcodeUrl" alt="">
        </div>
        <a @click="endPartyMemberSign(meetingId)" class="sign-end-btn">结束签到</a>
      </div>
      <div class="sign-pink" v-if="!qrcodeFlag">
        <div class="sign-gray flex-center">
          签到已结束
        </div>
      </div>
      <div class="work-message-lists">
        <div class="flex-between-center sign-content">
          <ul class="flex-justify-start sign-lists">
            <li @click="showSign('1')" :class="{'sign-active':signStatus=='1'}" class="">会议已签到人员（{{getListByFlag(1).length}}）</li>
            <li @click="showSign('0')" :class="{'sign-active':signStatus=='0'}">会议未签到人员（{{getListByFlag(0).length}}）</li>
          </ul>
          <!--<img @click="isSettings=!isSettings" class="back-btn" src="../../../../static/images/zzsh_qiandao_set.png">-->
        </div>
        <div class="sign-lists-tabs" style="display: block;">
          <div class="sign-settings flex-between-center" v-if="qrcodeFlag">
            <div class="  flex-center">
              <input class="allSelect" type="checkbox" v-model="allSelect" name="" id="" value="" />
              <p>全选</p>
            </div>
            <p class="unselect-btn" :class="{'active':selectedList.length>0}" @click="setSign()">{{signStatus==1?'设为未签到':'设为已签到'}}</p>
          </div>

          <ul class="people-lists">
            <li @click="selectPeople(item)" v-if="signStatus==item.signSatus" :class="{'people-select':selectedIndexOf(item)>-1}" v-for="item in data.insPartyMeetingLogResponseModelList" class="flex-justify-start">
              <div class="people-lists-touxiang"></div>
              <p>{{item.userName}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import api from '@/common/config/api'
  export default {
    components: {
    },
    name: '',
    props: ['meetingId'],
    data () {
      return {
        fn: tools,
        allSelect: false,
        isSettings: true,
        signStatus: '1',
        selectedList: [],
        data: this.$store.state.scheduleDetail,
        swipeData: [],
        infinite: true,
        pageIndex: 0,
        qrcodeUrl: '',
        qrcodeFlag: true
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      loadData () {
        // 191208181521710032
        // let fileId = this.$store.state.signImg
        // fileId = '191208181521710032'
        // loginService.downLoadFile(fileId).then((res) => {
        // })
        this.qrcodeUrl = api.downLoadFile + this.data.insPartyMeetingResponseModel.qrCodeId
        if (this.data.insPartyMeetingResponseModel.status === "2" || this.data.insPartyMeetingResponseModel.status === "3" || this.data.insPartyMeetingResponseModel.status === "4") {
          this.qrcodeFlag = false
        }
        console.log("==========qrcodeUrl=" + this.qrcodeUrl)
      },
      // 结束会议签到
      endPartyMemberSign (meetingId) {
        console.log(this.$store.state.scheduleDetail.insPartyMeetingResponseModel)
        meetingId = meetingId || this.$store.state.scheduleDetail.insPartyMeetingResponseModel.id
        loginService.endPartyMemberSign(meetingId).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.qrcodeFlag = false
          this.$store.state.scheduleData.status = '2'
          tools.tip(res.message)
          this.loadData()
        })
      },
      setSign () {
        let meetingId = this.meetingId || this.$store.state.scheduleDetail.insPartyMeetingResponseModel.id
        // 已经签到 设置为未签到
        let signStus = this.signStatus == '1' ? '0' : '1'
        loginService.setSignUnUanually(meetingId, this.getSelectIds(this.selectedList), signStus).then((res) => {
          if (res.code === 200) {
            tools.tip('设置成功')
            this.$emit('update')
          }
        })
      },
      // 获取IDs
      getSelectIds (_list) {
        let list = []
        _list.forEach((v) => {
          list.push(v.id)
        })
        return list.join(',')
      },
      selectPeople (item) {
        let index = this.selectedIndexOf(item)
        if (index > -1) {
          return this.selectedList.splice(index, 1)
        }
        this.selectedList.push(item)
      },
      showSign (flag) {
        this.selectedList = []
        this.signStatus = flag
      },
      selectedIndexOf (item) {
        let index = -1
        this.selectedList.some((v, i) => {
          if (item.id === v.id) {
            index = i
            return false
          }
        })
        return index
      },
      getListByFlag (flag) {
        let list = []
        this.data.insPartyMeetingLogResponseModelList.forEach((v, index) => {
          if (v.signSatus == flag) {
            list.push(v)
          }
        })
        return list
      },
      showImagePreview () {
        this.$localStorage.set('qrcodeUrl', this.qrcodeUrl)
        this.$router.push({name: "erweima"})
        // if (this.qrcodeUrl.length < 1) {
        //   return false
        // }
        // let imgs = [this.qrcodeUrl]
        // this.$createImagePreview({
        //   initialIndex: 0,
        //   imgs: imgs
        // }, (h) => {
        //   return h('div', {
        //     class: {
        //       'image-preview-custom-header': false
        //     },
        //     slot: 'header'
        //   }, '')
        // }).show()
      }
    },
    watch: {
      allSelect (newValue) {
        if (newValue) {
          let list = this.getListByFlag(this.signStatus)
          this.selectedList = list.slice(0, list.length)
        } else {
          this.selectedList = []
        }
      }
    }
  }
</script>
<style scoped="">
  .active {
    background-color: rgb(243, 77, 74);
  }
</style>
